<template>
  <el-table
    :data="goodsList"
    class="custom-goods-table"
    border stripe
    row-key="id"
    lazy
    @expand-change="expandDetail"
    ref="loadGoodsDetail"
    style="width: 100%">
    <!--<el-table-column type="index" label="#"></el-table-column>-->
    <el-table-column type="expand" label="详情" width="60px">
      <template>
        <goods-detail :goods-form="goodsDetail"/>
      </template>
    </el-table-column>
    <el-table-column prop="shop_code" label="店铺"></el-table-column>
    <el-table-column prop="name" label="商品名称"></el-table-column>
    <el-table-column label="商品图标">
      <template slot-scope="scope">
        <el-image
          style="height: 80px; width: 120px"
          :src="scope.row.list_pic_url"
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="retail_price" label="单价">
      <template slot-scope="scope">{{ scope.row.retail_price | formatPrice }}</template>
      <!--<template slot-scope="scope">
        {{scope.row.retail_price.toFixed(2) }}
       <img :src="`远程地址`+item.ImagePath" style="width:80px;height:50px">
      </template>-->
    </el-table-column>
    <el-table-column prop="goods_brief" label="商品简介"></el-table-column>
    <el-table-column label="操作" width="120px" align="center">
      <template slot-scope="scope">
        <p>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="handleUpdateProduct(scope.row.id)">编辑
          </el-button>
        </p>
        <p>
          <goods-remove-dialog :id="scope.row.id" @goods-list="updateGoodsList"/>
        </p>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

import GoodsDetail from './GoodsDetail'
import GoodsRemoveDialog from './GoodsRemoveDialog'
import {
  getGoodsDetail
} from '../../../network/goods'

export default {
  name: 'GoodsTable',
  components: {
    GoodsDetail,
    GoodsRemoveDialog
  },
  filters: {
    formatPrice (value) {
      return Math.round(value * 100) / 100
    }
  },
  props: {
    goodsList: {
      type: Array,
      default () {
        return []
      }
    },
    listQuery: {
      type: Object,
      default () {
        return {
          name: '',
          page: 1,
          size: 10
        }
      }
    }
  },
  data () {
    return {
      goodsDetail: {
        info: {
          name: '',
          goods_brief: ''
        },
        attribute: [],
        gallery: [],
        imageText: [],
        productList: []
      },
      isLoading: false,
      expands: {}
    }
  },
  methods: {
    // 监听子组件发射的事件，获得最新的siteList和total信息
    updateGoodsList () {
      this.$emit('goods-list')
    },
    expandDetail (row, expandedRows) {
      for (let i = 0; i < expandedRows.length; i++) {
        if (this.expands.id !== expandedRows[i].id) {
          this.$refs.loadGoodsDetail.toggleRowExpansion(expandedRows[i], false)
        }
      }
      if (this.isLoading || expandedRows.length <= 0) {
        return
      }
      this.isLoading = true
      this.$refs.loadGoodsDetail.toggleRowExpansion(row, false)
      getGoodsDetail(row.id).then(res => {
        // 更新失败
        if (res.status !== 200) {
          this.isLoading = false
          return this.alertMessage('获取商品信息失败', 'error')
        }
        this.goodsDetail = res.data.data
        console.log('goods detail:', this.goodsDetail)
        this.expands = row
        this.$refs.loadGoodsDetail.toggleRowExpansion(row, true)
        this.isLoading = false
      })
    },
    handleUpdateProduct (id) {
      console.log('update goods', id)
      this.$router.push({
        path: '/add',
        query: { id: id }
      })
    }
  }
}
</script>

<style scoped>
.custom-goods-table {
  margin-top: 20px;
}
</style>
